<template>
  <button class="button" :style="style" :class="[`button-${type}`,className, size, danger && `danger`, block && 'button-block']">
    <slot />
  </button>
</template>

<script setup>
import { toRefs, defineProps } from 'vue'
const props = defineProps(['size', 'type', 'danger', 'block', 'style', 'className'])
const { size = 'lg', type = 'primary', block, danger = true, style, className } = toRefs(props)
</script>

<style scoped lang="scss">
.button{
  background: red;
  border: none;
  outline: none;
  color: #fff;
  &.button-block{
    width: 100% !important;
  }
  &.primary{
    &.danger{
      background: red;
    }
  }
  &-default {
    height: dpi(9rem);
    background-color: #ffffff;
    border: solid 1px #dddddd; 
    color: #0571b0;
  }
  &.lg{
    padding: 0 dpi(3rem);
    // @include addwh(19rem, 9rem);
    height: dpi(9rem);
    font-size: dpi(3rem);
  }
}
</style>